<template>
    <div class="app-container" style="padding: 5px;">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="110px" label-position="right">
            <el-form-item label="目标年份：" prop="year">
                <el-select v-model="queryParams.year" filterable @change="handleChange">
                    <el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-table :data="targetList" border stripe>
            <el-table-column label="年月" align="center" prop="rq"></el-table-column>
            <el-table-column label="接单金额" align="center" prop="ht">
                <template slot-scope="scope">
                    <span style="color:red;" v-if="scope.row.rq!='合计'">{{ scope.row.ht }}</span>
                    <span v-if="scope.row.rq=='合计'">{{ scope.row.ht }}</span>
                </template>
            </el-table-column>
            <el-table-column label="保底" align="center">
                <el-table-column label="目标金额" align="center" prop="bd">
                    <template slot-scope="scope">
                        <span v-if="scope.row.rq=='合计'">{{ scope.row.bd }}</span>
                        <span style="color:blue;" v-if="scope.row.rq!='合计'">{{ scope.row.bd }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="达成比例" align="center" prop="bdrate">
                    <template slot-scope="scope">
                        <span v-if="scope.row.rq=='合计'">{{ scope.row.bdrate }}%</span>
                        <span style="color:blue;" v-if="scope.row.rq!='合计'">{{ scope.row.bdrate }}%</span>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="冲刺" align="center">
                <el-table-column label="目标金额" align="center" prop="bd">
                    <template slot-scope="scope">
                        <span v-if="scope.row.rq=='合计'">{{ scope.row.cc }}</span>
                        <span style="color:green;" v-if="scope.row.rq!='合计'">{{ scope.row.cc }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="达成比例" align="center" prop="bdrate">
                    <template slot-scope="scope">
                        <span v-if="scope.row.rq=='合计'">{{ scope.row.ccrate }}%</span>
                        <span style="color:green;" v-if="scope.row.rq!='合计'">{{ scope.row.ccrate }}%</span>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="超预期" align="center">
                <el-table-column label="目标金额" align="center" prop="bd">
                    <template slot-scope="scope">
                        <span v-if="scope.row.rq=='合计'">{{ scope.row.cyq }}</span>
                        <span style="color:red;" v-if="scope.row.rq!='合计'">{{ scope.row.cyq }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="达成比例" align="center" prop="bdrate">
                    <template slot-scope="scope">
                        <span v-if="scope.row.rq=='合计'">{{ scope.row.cyqrate }}%</span>
                        <span style="color:red;" v-if="scope.row.rq!='合计'">{{ scope.row.cyqrate }}%</span>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>
        <div ref="chart" style="width: 100%; height: 1000px;"></div>
    </div>
</template>

<script>
import { listDsInitDictData,listDsTargetData } from "@/api/system/weekly/weeklydashboard";
import * as echarts from 'echarts';
export default {
    name: "Dstarget",
    data() {
        return {
            yearList: [],
            targetList: [],
            queryParams: {
                year: null,
            },
        }
    },
    created() {
      this.getInitData();
    },
    mounted(){
        
    },
    methods: {
        getInitData(){
            listDsInitDictData().then(res =>{
                this.yearList = res.data.years;
                this.queryParams.year = res.data.year;
                this.getList();
            })
        }, 
        handleChange(){
            this.getList();
        },
        getList(){
            listDsTargetData(this.queryParams).then(res =>{
                this.targetList = res.data.list;
                const chart = echarts.init(this.$refs.chart);
                let labels = [];
                if(res.data.chart.length>0){
                    for(let i=0;i<res.data.chart.length;i++){
                        labels.push(res.data.chart[i].rq);
                    }
                } 
                const option = {
                    title: {
                        text: '电商目标完成情况',
                        textStyle: {
                            fontSize: 14, // 设置标题字体大小
                            fontWeight: 'bold', // 设置字体粗细
                            color:'#0099ff'
                        },
                        left: 'center'
                    },
                    tooltip: { 
                        trigger: 'axis',
                        formatter: function (params) {
                        return params[0].data.extraInfo
                        }
                    },
                    legend: { 
                        right: 5,            // 距右侧 10px（也可写 'right' 贴边）
                        top: 10,
                        data: ['超预期目标', '冲刺目标','保底目标','实际达成']
                    },

                    /* 横向：Y 轴类目，X 轴数值 */
                    yAxis: { 
                        type: 'category', 
                        data: labels,
                        axisLabel: {
                            textStyle: {
                                fontSize: 12,    // 设置 X 轴标签字体大小
                            }
                        },
                    },
                    xAxis: { 
                        type: 'value',
                        axisLabel: {
                        textStyle: {
                            fontSize: 12,    // 设置 X 轴标签字体大小
                        }
                        },
                        splitLine: {
                            show: true, // 显示网格线
                            lineStyle: {
                                type: 'solid' // 设置网格线为虚线
                            },
                        },
                    },

                    series: [
                        /* 三条不同颜色的条放在同一位置重叠 */
                        {
                            name: '超预期目标',
                            type: 'bar',
                            stack: 'grpA',        // 不同 stack，防止堆叠
                            barGap: '-100%',      // 🔑 负值 → 完全重叠
                            barWidth: 20,
                            data: res.data.chart.map(item => ({
                                value: item.cyq,
                                name: item.rq,
                                extraInfo: "年月: <span style='color:blue;font-weight:bold;'>"+item.rq+"</span><br/>接单金额：<span style='color:#F28E2B;font-weight:bold;'>"+item.ht+"万元</span><br/>保底达成比例: <span style='color:#4E79A7;font-weight:bold;'>"+item.bdrate+"%</span><br/>保底目标: <span style='color:#4E79A7;font-weight:bold;'>"+item.bd+"万元</span><br/>冲刺达成比例: <span style='color:#4E79A7;font-weight:bold;'>"+item.ccrate+"%</span><br/>冲刺目标: <span style='color:#4E79A7;font-weight:bold;'>"+item.cc+"万元</span><br/>超预期达成比例: <span style='color:red;font-weight:bold;'>"+item.cyqrate+"%</span><br/>超预期目标: <span style='color:red;font-weight:bold;'>"+item.cyq+"万元</span>"
                            })),
                            itemStyle: { color: 'red' },
                            label: {
                                show: true,
                                position: 'right',     
                                formatter: '{c}万元',
                                fontSize: 9,
                            }
                        },
                        {
                            name: '冲刺目标',
                            type: 'bar',
                            stack: 'grpB',
                            barGap: '-75%',
                            barWidth: 22,
                            data: res.data.chart.map(item => ({
                                value: item.cc,
                                name: item.rq
                            })),
                            itemStyle: { color: 'lightgreen' },
                            label: {
                                show: true,
                                position: 'right',     
                                formatter: '{c}万元',
                                fontSize: 9,
                            }
                        },
                        {
                            name: '保底目标',
                            type: 'bar',
                            stack: 'grpc',
                            barGap: '-50%',
                            barWidth: 22,
                            data: res.data.chart.map(item => ({
                                value: item.bd,
                                name: item.rq
                            })),
                            itemStyle: { color: '#4E79A7' },
                            label: {
                                show: true,
                                position: 'right',     
                                formatter: '{c}万元',
                                fontSize: 9,
                            }
                        },
                        {
                            name: '实际达成',
                            type: 'bar',
                            stack: 'grpd',
                            barGap: '-50%',
                            barWidth: 22,
                            data: res.data.chart.map(item => ({
                                value: item.ht,
                                name: item.rq
                            })),
                            itemStyle: { color: '#F28E2B' },
                            label: {
                                show: true,
                                position: 'right',     
                                formatter: '{c}万元',
                                fontSize: 9,
                            }
                        }
                    ]
                    };
                chart.setOption(option);
            })
        }
    }
}
</script>